<template>
  <div class="ai-image-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>AI图片生成</span>
      </div>
      
      <!-- 输入方式选择 -->
      <el-radio-group v-model="inputType" class="input-type-group">
        <el-radio label="text">文字描述</el-radio>
        <el-radio label="image">图片上传</el-radio>
      </el-radio-group>

      <!-- 文字输入区域 -->
      <div v-if="inputType === 'text'" class="text-input-area">
        <el-input
          type="textarea"
          :rows="4"
          placeholder="请输入图片描述，例如：一只可爱的猫咪在草地上玩耍"
          v-model="textPrompt"
          maxlength="500"
          show-word-limit>
        </el-input>
      </div>

      <!-- 图片上传区域 -->
      <div v-else class="image-upload-area">
         <el-upload ref="upfileload" class="upload-demo" action=" https://65114f5d.r27.cpolar.top/wormhole-arunachal/oss/upload"
          :on-success="responseData" :headers="headers" list-type="picture">
          <el-button size="small" type="primary">选择图片</el-button>
          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
        </el-upload>
        <div v-if="uploadedImage" class="preview-image">
          <img :src="uploadedImage" alt="上传的图片">
        </div>
      </div>

      <!-- 生成参数设置 -->
      <div class="generation-params">
        <el-form :model="params" label-width="100px">
          <el-form-item label="图片尺寸">
            <el-select v-model="params.size" placeholder="请选择图片尺寸">
              <el-option label="512x512" value="512x512"></el-option>
              <el-option label="768x768" value="768x768"></el-option>
              <el-option label="1024x1024" value="1024x1024"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="生成数量">
            <el-input-number v-model="params.count" :min="1" :max="4"></el-input-number>
          </el-form-item>
        </el-form>
      </div>

      <!-- 生成按钮 -->
      <div class="generate-button">
        <el-button type="primary" @click="generateImage" :loading="generating">
          {{ generating ? '生成中...' : '生成图片' }}
        </el-button>
      </div>


   <el-dialog title="生成结果" :close-on-click-modal="false" :visible.sync="visible">
    <div class="demo-image__error">
      <div class="image-container">
        <img :src="imageUrl" alt="结果" class="image"/>
      </div>
    </div>
  </el-dialog>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputType: 'text',
      textPrompt: '',
      uploadedImage: '',
      uploadUrl: '',
      imageUrl:'',
      generating: false,
      visible:false,
      params: {
        size: '512x512',
        count: 1
      },
      generatedImages: []
    }
  },
  methods: {
        responseData(response) {
      // 处理上传成功的逻辑
      this.imageUrl = response.data.filePath;
      // 你可以在这里进行如下的操作：显示通知、更新数据等
      this.$message.success('文件上传成功！');
    },
    // 生成图片
    generateImage() {
      if (this.inputType === 'text' && !this.textPrompt) {
        this.$message.warning('请输入图片描述')
        return
      }
      this.generating = true
      this.$http({
        url: this.$http.adornUrl('/image/image/createWormholeGalaxyImage'),
        method: 'post',
        timeout: 18000000,
        data: this.$http.adornData({
          type: this.inputType,
          prompt: this.textPrompt,
          image_url: this.imageUrl,
          seed: 123456,
        })
      }).then(({data}) => {
        if (data && data.status) {
          this.imageUrl=data.image_url,
          this.visible=true,
          this.$message.success('生成成功')
        } else {
          this.$message.error(data.msg || '生成失败')
        }
      }).catch(() => {
        this.$message.error('生成失败')
      }).finally(() => {
        this.generating = false
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.ai-image-container {
  padding: 20px;
  
  .box-card {
    max-width: 1200px;
    margin: 0 auto;
  }

  .input-type-group {
    margin-bottom: 20px;
  }

  .text-input-area {
    margin-bottom: 20px;
  }

  .image-upload-area {
    margin-bottom: 20px;
    
    .preview-image {
      margin-top: 20px;
      text-align: center;
      
      img {
        max-width: 300px;
        max-height: 300px;
        border-radius: 4px;
      }
    }
  }

  .generation-params {
    margin-bottom: 20px;
  }

  .generate-button {
    text-align: center;
    margin-bottom: 20px;
  }

  .result-area {
    margin-top: 30px;

    h3 {
      margin-bottom: 20px;
      font-weight: 500;
      color: #303133;
    }

    .image-card {
      margin-bottom: 20px;
      transition: all 0.3s;

      &:hover {
        transform: translateY(-5px);
        box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
      }

      .generated-image {
        width: 100%;
        height: 200px;
        object-fit: cover;
      }

      .image-actions {
        padding: 10px;
        display: flex;
        justify-content: space-around;
        border-top: 1px solid #eee;
      }
    }
  }
}
</style>
